<template>
  <!--default-expand-all -->
  <el-table
    v-loading="loading"
    :data="permissionList"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="code" label="权限" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          @click="addPermission(row)"
          :disabled="row.level === 4"
          type="default"
          size="small"
        >
          {{ row.level === 3 ? '添加功能' : '添加菜单' }}
        </el-button>
        <el-button
          @click="updatePermission(row)"
          v-show="row.level !== 1"
          type="primary"
          size="small"
        >
          编辑
        </el-button>
        <el-button
          @click="deletePermission(row.id)"
          v-show="row.level !== 1"
          type="danger"
          size="small"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <SetPermission ref="setP" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { reqPermissionList, reqDeleteCurPermission } from '@/api/acl/menu'
import SetPermission from './addPermission.vue'
import type {
  permissionObj,
  permissionRecord,
  ResponsePermission,
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
onMounted(() => {
  getList()
})
// 点击添加
const addPermission = (row: permissionObj) => {
  setP.value.addDialog(row)
}
const updatePermission = (row: permissionObj) => {
  setP.value.updateDialog(row)
}

const setP = ref()
const permissionList = ref<permissionRecord>([])
const loading = ref(false)
const getList = async () => {
  loading.value = true
  const res: ResponsePermission = await reqPermissionList()
  loading.value = false
  if (res.code === 200) {
    permissionList.value = res.data
  }
}
const deletePermission = async (id: number) => {
  const res = await reqDeleteCurPermission(id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    getList()
  }
}

defineExpose({
  getList,
})
</script>
<script lang="ts">
export default {
  name: 'permission',
}
</script>
<style lang="scss" scoped></style>
